<template>
	<view class="goods-box" :style="'height: '+height">
		<!-- <view class="u-text-center u-m-b-20 u-m-t-20"><text class="u-font-32">选择回收物</text></view> -->
		<view class="u-flex u-flex-1" style="align-items: flex-start;">
			<view class="hd">
				<scroll-view :scroll-y="true" :style="'height: calc('+height+' - 88rpx)'">
					<view style="white-space: nowrap">
						<view class="item" :class="choose==index?'on':''" v-for="(item,index) in LargeTypeList"
							:key="item.id" @click="chooseLargeType(item,index)">
							<u-image width="50rpx" height="50rpx" :src="item.icon" shape="circle" class="img"></u-image>
							<view class="u-p-t-10"><text>{{item.name}}</text></view>
						</view>
						<!-- <view class="item back">
							<u-icon name="arrow-left-double" class="tips-txt" size="32"></u-icon>
							<view class="u-p-t-10"><text class="tips-txt u-font-28">返回</text></view>
						</view> -->
					</view>
				</scroll-view>
			</view>
			<view class="bd u-m-l-30 u-m-r-30 u-m-b-30">
				<view class="lower-level u-p-b-30">
					<view v-for="(item,index) in lowerTypeList" :key="item.id" class="item u-m-b-6" @click="chooseLargeType(item)">
						<view class="name u-m-r-6">
							<view>
								<text class="u-font-28 u-m-r-10">{{item.name}}</text>
								<u-icon name="arrow-down" class="tips-txt"></u-icon>
							</view>
						</view>
					</view>
					<view v-for="(item,index) in ProductList" :key="item.id" class="item u-m-b-6"
						:class="{'on':item.on}" @click="addLowerLevel(item)">
						<view class="name u-m-r-6">
							<view>
								<text class="u-font-24">{{item.name}}</text>
								<view class="u-p-t-4">
									<text class="tips-txt">{{item.price}}元/KG</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderId: 0,
			details: {},
			single: { //是否只能单选
				type: Boolean,
				default: () => {
					return true
				}
			},
			height: {
				type: String,
				default: () => {
					return '90vh'
				}
			}
		},
		data() {
			return {
				LargeTypeList: [], //一级目录列表
				lowerTypeList: [], //下级目录列表
				typeObj: {}, //选择的品类
				ProductList: [], //产品列表
				chooseType: [], //已选择的下级分类
				smallTypeId: 0,
				confirmForm: {
					orderid: 0,
					details: [
						// {
						// 	id: 0,
						// 	weight: 0,
						// 	price: 0
						// }
					]
				},
				choose: 0
			}
		},
		created() {
			console.log('createddetails:', this.details)
			// #ifdef H5
			this.confirmForm.details = []
			if (this.details) {
				this.chooseType = JSON.parse(JSON.stringify(this.details))
				this.chooseType.forEach((item) => {
					this.confirmForm.details.push(item)
				})
				this.confirmForm.total = 0
				this.confirmForm.details.forEach((item, index) => {
					this.confirmForm.total += item.weight * item.price
				})
			}
			// #endif
			this.init()
		},
		watch: {
			details(value, oldvalue) {
				console.log('监听details', value, oldvalue)
				// #ifndef H5
				this.confirmForm.details = []
				this.chooseType = value

				this.ProductList.forEach((item, i) => {
					// 对比已选择下级分类
					if (this.chooseType.find(cell => cell.id == item.id)) {
						this.ProductList[i].on = this.chooseType.find(cell => cell.id == item.id).on
					} else {
						this.ProductList[i].on = false
					}
				})
				
				this.chooseType.forEach((item) => {
					this.confirmForm.details.push(item)
				})
				this.confirmForm.total = 0
				this.confirmForm.details.forEach((item, index) => {
					this.confirmForm.total += item.weight * item.price
				})
				// #endif
			}
		},
		methods: {
			init() {
				this.getTypeList(0).then((res)=>{
					if(res.length > 0){
						this.chooseLargeType(res[0], 0)
					}
				})
			},
			//获取大类
			getTypeList(pid) {
				return uni.$u.http.get('/Pack/WasteType/List?pid='+pid).then((res) => {
					if(pid == 0){
						this.LargeTypeList = res.datas.filter((item)=>item.usestate == '已启用')
						this.LargeTypeList.forEach((item) => {
							item.icon = this.fileURL + item.icon
						})
					}else{
						this.lowerTypeList = res.datas.filter((item)=>item.usestate == '已启用')
						this.lowerTypeList.forEach((item) => {
							item.icon = this.fileURL + item.icon
						})
					}
					return res
				}).catch(() => {
					// this.loading = false
				})
			},
			// 获取品名
			getProductList(typeId){
				uni.$u.http.get(`/Pack/Product/List?typeId=${typeId}`).then((res)=>{
					this.ProductList = res.datas.filter(item => item.usestate === '已启用')
					this.ProductList.forEach((item, i) => {
						// 对比已选择下级分类
						if (this.chooseType.find(cell => cell.id == item.id)) {
							this.ProductList[i].on = this.chooseType.find(cell => cell.id == item.id).on
						} else {
							this.ProductList[i].on = false
						}
					})
				})
			},
			// 选择左侧第一级目录
			chooseLargeType(item,index){
				if(index >= 0){
					this.choose = index
				}
				this.typeObj = item
				this.getProductList(item.id)
				this.getTypeList(item.id)
			},
			// 选中下级分类
			addLowerLevel(item) {
				if(item.usestate == '已冻结'){ //如果已经冻结，则不能选择
					return
				}
				if(!item.on){ //如果未被选中
					if(this.single){ //是否单选
						this.chooseType = [item]
						this.ProductList.forEach((cell)=>{
							cell.on = false
						})
						item.on = true
					}else{
						this.chooseType.push(item)
						item.on = true
					}
					
					this.confirm()
				}
			},
			// 补充confirm方法（原注释代码）
			confirm() {
				this.confirmForm.details = this.chooseType.filter(item => item.on);
				this.$emit('confirm', this.confirmForm);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tips-txt{
		font-size: 24rpx;
		color: #909399;
	}
	// 分拣清算
	.goods-box {
		// padding: 0;
		// padding-top: 10rpx;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.hd {
			display: flex;
			background: $u-bg-color;
			margin-bottom: 10rpx;
			width: 160rpx;
			// height: 100%;

			.item {
				// flex: 1;
				text-align: center;
				padding: 20rpx 0;
				width: 160rpx;
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// width: 25%;
				// display: inline-block;

				.img {
					display: inline-block;
					background: #fff !important;
				}

				&.on {
					background-color: $u-type-primary;
					color: #fff;
				}
				
				&.back{
					background: #e5e5e5;
					margin: 16rpx;
					width: 130rpx;
					border-radius: 16rpx;
				}
			}
		}

		.bd {
			// height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;

			.td {
				height: 94rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}

		.err {
			color: $u-type-error;
			border-color: $u-type-error !important;
		}

		.lower-level {
			display: flex;
			flex-wrap: wrap;
			// flex: 1;
			align-content: flex-start;

			.item {
				width: 33.33%;
				height: 120rpx;

				.name {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					border: 1px solid $u-border-color;
					color: $u-content-color;
					border-radius: 6rpx;
					text-align: center;
				}

				&.on {
					.name {
						border: 1px solid $u-color-main;
						color: $u-color-main;
						background-color: #10beca1a;
					}
				}
			}
		}

		.input-text {
			border: 1px solid $u-border-color;
			border-radius: 5px;
			height: 30px;
			text-align: center;
			margin: 20rpx 0;
			padding-right: 20rpx;
			padding-left: 20rpx;
		}
	}
</style>